<template>
	<view class="submitOrder-main">
		<view class="submitOrder-info">
			<view class="orderImage">
				<image :src="productDetail.cover_image"
					mode="widthFix"></image>
			</view>
			<view class="infos">
				<view class="tit">
					老板的红包狂暴版
				</view>
				<view class="options">
					<view class="pir">
						<text style="font-size: 12px;">￥</text>{{aggregate}}
					</view>
					<view class="nums">
						x{{modelValue}}
					</view>
				</view>
			</view>
		</view>

		<view class="submitOrder-form">
			<view class="submitOrder-form-input">
				<view class="label">
					联系人
				</view>
				<view class="form-input">
					<input type="text" placeholder="请输入联系人" v-model="baseFormData.contact_name" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					游戏ID
				</view>
				<view class="form-input">
					<input type="text" placeholder="请务必输入正确游戏ID" v-model="baseFormData.game_account_id" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					游戏昵称
				</view>
				<view class="form-input">
					<input type="text" placeholder="请务必输入正确游戏昵称"v-model="baseFormData.game_nickname" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					客户端
				</view>
				<view class="form-input">
					<uni-data-checkbox v-model="baseFormData.client_type" :localdata="clientType" />
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					指定打手
				</view>
				<view class="form-input">
					<input type="text" placeholder="请输入指定打手" v-model="baseFormData.assigned_server_id" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					联系电话
				</view>
				<view class="form-input">
					<input type="text" placeholder="请输入联系电话" v-model="baseFormData.contact_phone" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					备注
				</view>
				<view class="form-input">
					<input type="text" placeholder="请输入备注（选填）" v-model="baseFormData.remark" style="font-size: 26rpx;">
				</view>
			</view>

			<view class="submitOrder-form-input">
				<view class="label">
					商品金额
				</view>
				<view class="form-input">
					<view class="pir">
						￥{{aggregate}}
					</view>
				</view>
			</view>
		</view>

		<view class="submitOrder-footer">
			<view class="nums">
				x{{modelValue}}
			</view>
			<view class="sub-btn">
				合计<text class="pir"><text style="font-size: 12px;">￥</text>{{aggregate}}</text>
				<view class="btn" @click="getSubmitOrder">
					提交订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductDetail
	} from '@/api/shop/shop.js'
	import {
		SubmitOrder
	} from '@/api/order/order.js'
	export default {
		data() {
			return {
				clientType: [{
					text: '端游',
					value: 1
				}, {
					text: '手游',
					value: 2
				}, {
					text: '全部',
					value: 0
				}],
				baseFormData: {
					order_type:1,
					// 联系人
					contact_name:"",
					// 游戏ID
					game_account_id:"",
					// 游戏昵称
					game_nickname:"",
					// 客户端
					client_type:1,
					// 指定打手ID
					assigned_server_id:null,
					// 联系方式
					contact_phone:"",
					// 备注
					remark:"",
					// 订单总金额
					actual_amount:"",
					// 商品ID
					product_id:null,
					// 商品数量
					num:1
				},
				productDetail: {
					id:null,
					cover_image: "",
					name: "",
					description: "",
					original_price: "",
					price: "",
					details: "",
					total_orders: 0
				},
				modelValue:1
			}
		},
		onLoad(option) {
			const {
				id,
				num
			} = option;
			this.modelValue = num;
			this.getProductDetailData(id)
		},
		computed:{
			aggregate(){
				return (Number(this.productDetail.price)*this.modelValue).toFixed(2)
			}
		},
		methods: {
			// 获取商品详情
			async getProductDetailData(id) {
				try {
					const res = await getProductDetail({
						product_id: id
					})
					this.productDetail = res.data
				} catch (error) {
					throw Error(error)
				}
			},
			// 提交订单
			async getSubmitOrder(){
				try{
					this.baseFormData.actual_amount = this.aggregate;
					this.baseFormData.num = this.modelValue;
					this.baseFormData.product_id = this.productDetail.id;
					const res = await SubmitOrder(this.baseFormData)
					uni.showToast({
						title:'支付成功',
						icon:'success'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1000)
				}catch(error){
					throw Error(error)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.submitOrder-main {
		.submitOrder-info {
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;

			.orderImage {
				width: 180rpx;
				height: 180rpx;
				font-size: 0px;
				margin-right: 20rpx;
				border-radius: 4px;
				overflow: hidden;
			}

			.infos {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tit {
					font-weight: 700;
				}

				.options {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.pir {
						color: red;
						font-size: 32rpx;
					}

					.nums {
						color: #999;
						font-size: 26rpx;
					}
				}
			}
		}

		.submitOrder-form {
			background-color: #fff;
			box-sizing: border-box;
			padding: 0px 30rpx;
			margin-top: 30rpx;

			.submitOrder-form-input {
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 1px #f9f9f9 solid;

				.label {
					width: 160rpx;
					font-size: 26rpx;
				}

				.form-input {
					flex: 1;
					color: #666;

					.pir {
						color: red;
						text-align: right;
					}
				}
			}
		}
		
		.submitOrder-footer{
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: 100%;
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.nums{
				font-size: 26rpx;
				color: #999;
			}
			.sub-btn{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.pir{
					margin-left: 2px;
					color: red;
					font-size: 32rpx;
				}
				.btn{
					margin-left: 20rpx;
					height: 75rpx;
					width: 240rpx;
					background-color: red;
					color: #fff;
					border-radius: 180rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
				}
			}
		}
	}
</style>